﻿<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>



<h2>商品流式列表</h2>

<div class="flow-demo" id="ID-flow-demo"></div>
<style>
    .flow-demo {
        height: 400px;
        overflow: auto;
        font-size: 0;
    }

        .flow-demo li {
            display: inline-block;
            margin: 0 5px;
            font-size: 14px;
            width: 48%;
            margin-bottom: 10px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: #eee;
        }

        .flow-demo img {
            width: 100%;
            height: 100%;
        }

    .flow-demo-lazyimg {
        height: 300px;
        overflow: auto;
        text-align: center;
    }

        .flow-demo-lazyimg img {
            width: 40%;
            height: 200px;
            margin: 0 3px 5px 0;
            border: none;
        }
</style>
<script>

    $(function () {
        flow();
    });

    function flow() {
        layui.use(function () {
            var flow = layui.flow;
            // 流加载实例
            flow.load({
                elem: '#ID-flow-demo', // 流加载容器
                scrollElem: '#ID-flow-demo', // 滚动条所在元素，一般不用填，此处只是演示需要。
                done: function (page, next) { // 执行下一页的回调
                    // 模拟数据插入
                    setTimeout(function () {
                        var lis = [];
                        for (var i = 0; i < 8; i++) {
                            lis.push('<li>' + ((page - 1) * 8 + i + 1) + '</li>')
                        }

                        // 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        // pages 为 Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < 10); // 此处假设总页数为 10
                    }, 520);
                }
            });
        });
    }

</script>